<!doctype html>
<html lang="zh">
    <head>
        <meta charset="utf-8" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1, shrink-to-fit=no"
        />
        <meta name="description" content="" />
        <meta name="author" content="" />

        <title>二手好房</title>
        <!-- Icon -->
        <link rel="icon" href="/static/img/favicon.ico" type="image/x-icon" />
        <link
            rel="shortcut icon"
            href="/static/img/favicon.ico"
            type="image/x-icon"
        />

        <!-- Bootstrap core CSS -->
        <!--<link
            href="/static/vendor/bootstrap/css/bootstrap.min.css"
            rel="stylesheet"
        />-->
        <link
            href="{{url_for('static',filename='vendor/bootstrap/css/bootstrap.min.css')}}"
            rel="stylesheet"
        />
        <link
            href="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css"
            rel="stylesheet"
        />

        <!-- Custom fonts for this template -->
        <link href="/static/css/font-awesome.min.css" rel="stylesheet" />

        <!-- Custom styles for this template -->
        <link href="/static/css/clean-blog.min.css" rel="stylesheet" />

        <style>


            /*定位，数量*/
            .area-info {
                margin-left: 5px;
                padding-left: 5px;
                font-size: 16px;
                padding-bottom: 10px;
                border-bottom: #ecf0f1 1px solid;
            }

            .info-line {
                margin: 10px 0 55px 0;
            }

            .course {
                margin-top: 10px;
                padding: 7px 5px 0 5px;
                background: #fff;
            }

            .course-info {
                height: 37px;
                font-weight: 500;
                color: #333;
                font-size: 16px;
            }

            .course-info1 {
                height: 20px;
                font-weight: 300;
                font-size: 12px;
            }

            .course-info span {
                line-height: 37px;
            }

            .price {
                color: #e74c3c;
                font-size: 14px;
            }

            .tj-header {
                margin: 30px 0 10px;
            }

            .describe {
                font-size: 15px;
                color: #bdc3c7;
            }

            /* login */
            .m-header {
                padding: 10px 16px 2px;
            }

            .login_form {
                margin-top: 150px;
                z-index：999;
            }

            .form-info {
                font-size: 18px;
                color: #2c3e50;
            }

            .switch-info {
                font-size: 14px;
                color: #2c3e50;
            }

            .btn {
                padding: 10px 20px;
                border-radius: 2px;
            }

            /* search */
            .my-nav-tab {
                border-bottom: none;
            }

            .chanle1, .chanle2 {
                background-color: #ced4da;
                font-size: 14px;
                line-height: 30px;
                color: #495057;
                padding: 0 10px;
                border-radius: 3px 3px 0 0;
                font-family: "Hiragino Sans GB", "Microsoft Yahei UI", "Microsoft Yahei", 微软雅黑, "Segoe UI", Tahoma, 宋体b8b体, SimSun, sans-serif;
            }

            .chanle1 {
                margin-right: 1px;
            }

            .chanle2 {
                margin-left: 1px;
            }

            .chanle1.active, .chanle2.active {
                background-color: #5bc0de;
                color: #fff;
                position: relative;
            }

            .my-btn {
                padding: 9px 20px !important;
                line-height: 18px;
                border-radius: 0 !important;
            }

            #txt {
                width: 658px !important;
                border-radius: 0 !important;
            }

            #txt:focus {
                box-shadow: none;
            }

            input::-webkit-input-placeholder {
                /* placeholder字体大小  */
                font-size: 14px;
                font-family: "Hiragino Sans GB", "Microsoft Yahei UI", "Microsoft Yahei", 微软雅黑, "Segoe UI", Tahoma, 宋体b8b体, SimSun, sans-serif;

            }

            #my-form {
                z-index: 999;
                position: absolute;
            }

            .li_style {
                z-index: 999;
                color: #495057;
                font-size: 14px;
                font-family: "Hiragino Sans GB", "Microsoft Yahei UI", "Microsoft Yahei", 微软雅黑, "Segoe UI", Tahoma, 宋体b8b体, SimSun, sans-serif;
                text-align: left;
                width: 658px;
                padding: 8px 14px;
            }

            .chart {
                height: 340px;
            }

            .chart-describion {
                font-size: 15px;
                color: #333;
                text-align: center

            }
        </style>
    </head>

    <body>
        <!-- Navigation -->
        <nav
            class="navbar navbar-expand-lg navbar-light fixed-top"
            id="mainNav"
        >
            <div class="container">
                <a class="navbar-brand" href="/">二手好房</a>
                <button
                    class="navbar-toggler navbar-toggler-right"
                    type="button"
                    data-toggle="collapse"
                    data-target="#navbarResponsive"
                    aria-controls="navbarResponsive"
                    aria-expanded="false"
                    aria-label="Toggle navigation"
                >
                    Menu
                    <i class="fas fa-bars"></i>
                </button>

                <div class="collapse navbar-collapse" id="navbarResponsive">
                    <ul class="navbar-nav ml-auto">
                        <li class="nav-item">
                            <a class="nav-link" href="/">首页</a>
                        </li>

                        <li class="nav-item" id="user">
                            {% if request.cookies.get('name') %}
                            <!--处于登录状态-->
                            <!--用户名、退出登录-->
                            <a
                                id="u_name"
                                class="nav-link"
                                href="/user/{{ request.cookies.get('name') }}"
                                >{{ request.cookies.get('name') }}</a
                            >
                            {% else %}
                            <!--没有处于登录装填下，才显示登录按钮-->
                            <a
                                class="nav-link"
                                data-toggle="modal"
                                data-target="#login"
                                href=""
                                >登录</a
                            >
                            {% endif %}
                        </li>

                        {% if request.cookies.get('name') %}
                        <li class="nav-item">
                            <a class="nav-link" id="logout" href="">退出登录</a>
                        </li>
                        {% endif %}
                    </ul>
                </div>
            </div>
        </nav>

        <!-- Page Header -->
        <header
            class="masthead"
            style="background-image: url(&quot;/static/img/home-bg.jpg&quot;)"
        >
            <div class="overlay"></div>
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 col-md-10 mx-auto">
                        <div class="site-heading">
                            <h1>二手好房</h1>
                            <span class="subheading">给您推荐优质房源</span>

                            <!--智能搜索功能-->
                            <div>
                                <ul
                                    class="nav nav-tabs my-nav-tab"
                                    style="margin: 15px 0 0 0"
                                >
                                    <li class="chanle1 active">
                                        <span>地区搜索</span>
                                    </li>
                                    <li class="chanle2">
                                        <span>户型搜索</span>
                                    </li>
                                </ul>
                                <form
                                    class="form-inline"
                                    role="form"
                                    id="my-form"
                                    action="/query"
                                >
                                    <div class="form-group">
                                        <label class="sr-only" for="txt"
                                            >名称</label
                                        >
                                        <input
                                            type="text"
                                            class="form-control"
                                            id="txt"
                                            name="addr"
                                            placeholder="请输入区域、商圈或小区名开始找房"
                                        />
                                    </div>
                                    <button
                                        type="submit"
                                        class="my-btn btn btn-info"
                                        id="btn"
                                    >
                                        提交
                                    </button>
                                    <ul id="list" class="list-group"></ul>
                                </form>
                            </div>
                        </div>
                        <div></div>
                    </div>
                </div>
            </div>
        </header>

        <!-- Main Content -->
        <div class="container">
            <!--定位，数量-->
            <div class="row">
                <div class="col-lg-12">
                    <div class="area-info">
                        <span style="color: #2980b9">当前城市:</span>
                        <span style="color: #e74c3c">北京</span>
                        &nbsp
                        <span style="color: #2980b9">房源总数:</span>
                        <span style="color: #e74c3c">{{ num }}</span>
                    </div>
                </div>
            </div>

            <!--当前城市-->
            <div class="row info-line">
                <!-- 模块1标题 -->
                <div class="col-lg-12 tj-header">
                    <h3>为您为家</h3>
                    <div class="describe">
                        <span>为您精准定位，当前城市房源信息</span>
                        <span class="float-right"
                            ><a
                                href="/list/pattern/1"
                                style="color: #3498db; padding-right: 5px"
                                >更多北京房源</a
                            ></span
                        >
                    </div>
                </div>
                <!-- 模块1信息展示 -->
                {% for house in house_new_list %}
                <div class="col-lg-4">
                    <div class="course">
                        <div>
                            <a href="/house/{{ house.id }}"
                                ><img
                                    class="img-fluid img-box"
                                    src="/static/img/house-bg1.jpg"
                                    alt=""
                            /></a>
                        </div>
                        <div class="course-info">
                            <span>{{ house.address }}</span>
                        </div>
                        <div class="course-info1">
                            <span
                                >{{ house.rooms }} - {{ house.area
                                }}平方米</span
                            >
                            <span class="price float-right"
                                >￥&nbsp{{ house.price }}</span
                            >
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
            <hr />

            <!--热点推荐-->
            <div class="row info-line">
                <!-- 模块2标题 -->
                <div class="col-lg-12 tj-header">
                    <h3>为您推荐</h3>
                    <div class="describe">
                        <span>热点房源，我们为你精选</span>
                        <span class="float-right"
                            ><a
                                href="/list/hot_house/1"
                                style="color: #3498db; padding-right: 5px"
                                >更多热点房源</a
                            ></span
                        >
                    </div>
                </div>
                <!-- 模块2内容 -->
                {% for house in house_hot_list %}
                <div class="col-lg-3">
                    <div class="course">
                        <div>
                            <a href="/house/{{ house.id }}"
                                ><img
                                    class="img-fluid img-box"
                                    src="/static/img/house-bg1.jpg"
                                    alt=""
                            /></a>
                        </div>
                        <div class="course-info">
                            <span>{{ house.address }}</span>
                        </div>
                        <div class="course-info1">
                            <span
                                >{{ house.rooms }} - {{ house.area
                                }}平方米</span
                            >
                            <span style="color: #3498db"
                                >&nbsp&nbsp<i
                                    class="fa fa-heart"
                                    aria-hidden="true"
                                    >&nbsp热度{{ house.page_views }}</i
                                ></span
                            >
                            <span class="price float-right"
                                >￥{{ house.price }}</span
                            >
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>

            <!--注册登录-->
            <div class="row info-line">
                <div class="col-lg-8 col-md-10 mx-auto">
                    <!-- 注册窗口 -->
                    <div
                        id="register"
                        class="modal fade login_form"
                        tabindex="-1"
                    >
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-body m-header">
                                    <button class="close" data-dismiss="modal">
                                        <span>&times;</span>
                                    </button>
                                </div>
                                <div class="modal-title">
                                    <h1 class="text-center">注册</h1>
                                </div>
                                <div class="modal-body">
                                    <form
                                        class="form-group"
                                        id="registeform"
                                        action="/register"
                                        method="post"
                                    >
                                        <div class="form-group">
                                            <label for="" class="form-info"
                                                >用户名</label
                                            >
                                            <input
                                                class="form-control"
                                                name="username"
                                                type="text"
                                                placeholder="6-15位字母或数字"
                                            />
                                        </div>
                                        <div class="form-group">
                                            <label for="" class="form-info"
                                                >密码</label
                                            >
                                            <input
                                                class="form-control"
                                                name="password"
                                                type="password"
                                                placeholder="至少6位字母或数字"
                                            />
                                        </div>
                                        <div class="form-group">
                                            <label for="" class="form-info"
                                                >再次输入密码</label
                                            >
                                            <input
                                                class="form-control"
                                                name="confirmPassword"
                                                type="password"
                                                placeholder="至少6位字母或数字"
                                            />
                                        </div>
                                        <div class="form-group">
                                            <label for="" class="form-info"
                                                >邮箱</label
                                            >
                                            <input
                                                class="form-control"
                                                name="email"
                                                type="email"
                                                placeholder="例如:123@123.com"
                                            />
                                        </div>
                                        <div class="text-right">
                                            <button
                                                class="btn btn-primary"
                                                id="registe-btn"
                                            >
                                                提交
                                            </button>
                                            <button
                                                class="btn btn-danger"
                                                data-dismiss="modal"
                                            >
                                                取消
                                            </button>
                                        </div>
                                        <a
                                            href=""
                                            data-toggle="modal"
                                            data-dismiss="modal"
                                            data-target="#login"
                                            class="switch-info"
                                            >已有账号？点我登录</a
                                        >
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 登录窗口 -->
                    <div id="login" class="modal fade login_form">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-body m-header">
                                    <button class="close" data-dismiss="modal">
                                        <span>&times;</span>
                                    </button>
                                </div>
                                <div class="modal-title">
                                    <h1 class="text-center">登录</h1>
                                </div>
                                <div class="modal-body">
                                    <form
                                        class="form-group"
                                        id="loginform"
                                        action="/login"
                                        method="post"
                                    >
                                        <div class="form-group">
                                            <label for="" class="form-info"
                                                >用户名</label
                                            >
                                            <input
                                                class="form-control"
                                                name="username"
                                                type="text"
                                                placeholder=""
                                            />
                                        </div>
                                        <div class="form-group">
                                            <label for="" class="form-info"
                                                >密码</label
                                            >
                                            <input
                                                class="form-control"
                                                name="password"
                                                type="password"
                                                placeholder=""
                                            />
                                        </div>
                                        <div class="text-right">
                                            <button
                                                class="btn btn-primary"
                                                id="login-btn"
                                            >
                                                登录
                                            </button>
                                            <button
                                                class="btn btn-danger"
                                                data-dismiss="modal"
                                            >
                                                取消
                                            </button>
                                        </div>
                                        <a
                                            href=""
                                            data-toggle="modal"
                                            data-dismiss="modal"
                                            data-target="#register"
                                            class="switch-info"
                                            >还没有账号？点我注册</a
                                        >
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <hr />
        </div>

        <!-- Footer -->
        <footer>
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 col-md-10 mx-auto">
                        <p class="copyright text-muted">
                            Copyright &copy; 二手好房 2019
                        </p>
                    </div>
                </div>
            </div>
        </footer>

        <!-- Bootstrap core JavaScript -->
        <script src="/static/vendor/jquery/jquery.min.js"></script>
        <script src="/static/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
        <script src="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js"></script>
        <script src="/static/js/login.js"></script>

        <!-- Custom scripts for this template -->
        <script src="/static/js/clean-blog.min.js"></script>
        <script
            type="text/javascript"
            src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"
        ></script>
        <script src="/static/js/echarts.min.js"></script>

        <script>
            // 由户型搜索切换至地区搜索或者重复点击地区搜索
            $(".chanle1").on("click", function () {
                // 用于地区搜索重复点击的初始化
                if ($(".chanle1").hasClass("active")) {
                    $(".chanle1").removeClass("active");
                    $("#txt").attr("name", "");
                    $("#txt").attr("placeholder", "");
                }
                // 移除户型搜索的样式
                $(".chanle2").removeClass("active");
                // 重新设置选中字段和<input>标签的属性
                $(".chanle1").addClass("active");
                $("#txt").attr("name", "addr");
                $("#txt").attr(
                    "placeholder",
                    "请输入区域、商圈或小区名开始找房",
                );
            });

            // 由地区搜索切换至户型搜索或者重复点击户型搜索
            $(".chanle2").on("click", function () {
                // 用于户型搜索重复点击的初始化
                if ($(".chanle2").hasClass("active")) {
                    $(".chanle2").removeClass("active");
                    $("#txt").attr("name", "");
                    $("#txt").attr("placeholder", "");
                }
                // 移除地区搜索的样式
                $(".chanle1").removeClass("active");
                // 重新设置选中字段和<input>标签的属性
                $(".chanle2").addClass("active");
                $("#txt").attr("name", "rooms");
                $("#txt").attr(
                    "placeholder",
                    "请输入户型开始找房，例如:1室1厅",
                );
            });

            // 输入框的书写逻辑
            var oTxt = document.getElementById("txt"); // 输入框
            var oBtn = document.getElementById("btn"); // 提交按钮
            var oList = document.getElementById("list"); // 提示列表

            // 设置锁，true表示锁住输入框，false表示解锁输入框
            var cpLock = false;

            // 中文搜索，监听compositionstart事件，如果触发该事件，就锁住输入框
            $("#txt").on("compositionstart", function () {
                cpLock = true;
            });

            // 中文搜索，监听compositionend事件，如果触发该事件，就解锁输入框
            $("#txt").on("compositionend", function () {
                cpLock = false;
                var keyWord = oTxt.value;
                var resultList = searchByIndexOf(keyWord);
            });

            // 英文搜索，监听input事件，用于处理字母搜索
            $("#txt").on("input", function () {
                if (!cpLock) {
                    var keyWord = oTxt.value;
                    var resultList = searchByIndexOf(keyWord);
                }
            });

            // 搜索关键字
            function searchByIndexOf(keyWord) {
                $(".my-nav-tab li").each(function (index, element) {
                    if ($(this).hasClass("active")) {
                        var info = $(this).text();

                        data = { kw: keyWord, info: info };
                        $.ajax({
                            url: "/search/keyword/",
                            type: "post",
                            dataType: "json",
                            data: data,
                            success: function (data) {
                                // {code=0, info=[]}
                                if (data["code"] == 0) {
                                    warning_str =
                                        "未找到关于" + keyWord + "的房屋信息！";
                                    alert(warning_str);
                                }
                                if (data["code"] == 1) {
                                    // {code=1, info=[{t_name='字段的名字 例如：东城-xxx-xxxx'， num=108},{},{}]}
                                    list = data["info"];
                                    console.log("search", list);

                                    oList.innerHTML = "";
                                    var item = null;
                                    for (var i = 0; i < 9; i++) {
                                        item = document.createElement("li");
                                        item.setAttribute(
                                            "class",
                                            "list-group-item li_style",
                                        );
                                        item.setAttribute(
                                            "title",
                                            list[i]["t_name"],
                                        );
                                        li_text =
                                            list[i]["t_name"] +
                                            '<span class="badge float-right">大约有' +
                                            list[i]["num"] +
                                            "套房</span>";
                                        console.log(li_text);
                                        item.innerHTML = li_text;
                                        oList.appendChild(item);
                                        info_to_txt();
                                    }
                                    return list;
                                }
                            },
                        });
                    }
                });
            }

            // 点击提交按钮进行查询
            // oBtn.addEventListener('click', function () {
            //     var keyWord = oTxt.value;
            //     var resultList = searchByIndexOf(keyWord);
            //     console.log(resultList);
            //
            // }, false);
            //
            // // 回车查询
            // oTxt.addEventListener('keydown', function (e) {
            //     if (e.keyCode == 13) {
            //         var keyWord = oTxt.value;
            //         var resultList = searchByIndexOf(keyWord);
            //     }
            // }, false);

            // 单击检索项将其填入搜索框
            function info_to_txt() {
                $(".li_style").on("click", function () {
                    // 实现了重复点击的初始化
                    if ($(this).hasClass("active")) {
                        $(this).removeClass("active");
                    }
                    $(this).addClass("active");
                    t_name = $(this).attr("title");
                    $("#txt").val("");
                    $("#txt").val(t_name);
                    $("#list").empty();
                });
            }
        </script>
    </body>
</html>
